<script setup lang="ts">

import {getCurrentInstance} from "vue";
import BaseApp from "~/contentScripts/views/sycm/baseApp.vue";
import {Shop, ShopLists, SycmShopAnalysisSale} from "~/contentScripts/views/sycm/shop_analysis/SycmShopAnalysisSale";
import User from "~/contentScripts/views/tao/list/components/user.vue";
import {isLogin} from "~/logic";
import {SycmTableUtils} from "~/utils/sycm/SycmTableUtils";

const loading = ref<boolean>(false);
const loginVisible = ref<boolean>(false);
const visible = ref<boolean>(false);
const showZs = ref<boolean>(false);
const shopLists = ref<ShopLists>();
const dates = ref<Array<String>>([]);
const columns = ref<Array<any>>([]);
const dataSource = ref<Array<any>>([]);
const calcDataSource = () => {
  dataSource.value = [];
  const data: any[] = [];
  shopLists.value?.selfShop?.TopTable.forEach((table: any, index: number) => {
    const obj = {
      shop: {
        title: shopLists.value?.selfShop?.title,
        logo: shopLists.value?.selfShop?.logo,
        shopId: shopLists.value?.selfShop?.shopId,
      },
      type: '本店',
      ...{
        date: table.statDate.value,
        item: table.item,
        payAmt: table.payAmt,
        tradeIndex: table.tradeIndex || {
          value: null,
          cycleCrc: null
        },
        uvIndex: table.uvIndex || {
          value: null,
          cycleCrc: null
        },
      }
    };
    data.push(obj);
    if (shopLists.value?.shop1) {
      const obj = {
        shop: {
          title: shopLists.value?.shop1.title,
          logo: shopLists.value?.shop1.logo,
          shopId: shopLists.value?.shop1.shopId,
        },
        type: '竞店1',
        ...{
          date: shopLists.value?.shop1.TopTable[index].statDate.value,
          item: shopLists.value?.shop1.TopTable[index].item,
          payAmt: shopLists.value?.shop1.TopTable[index].payAmt,
          tradeIndex: shopLists.value?.shop1.TopTable[index].tradeIndex || {
            value: null,
            cycleCrc: null
          },
          uvIndex: shopLists.value?.shop1.TopTable[index].uvIndex || {
            value: null,
            cycleCrc: null
          },
        }
      };
      data.push(obj);
    }
    if (shopLists.value?.shop2) {
      const obj = {
        shop: {
          title: shopLists.value?.shop2.title,
          logo: shopLists.value?.shop2.logo,
          shopId: shopLists.value?.shop2.shopId,
        },
        type: '竞店2',
        ...{
          date: shopLists.value?.shop2.TopTable[index].statDate.value,
          item: shopLists.value?.shop2.TopTable[index].item,
          payAmt: shopLists.value?.shop2.TopTable[index].payAmt,
          tradeIndex: shopLists.value?.shop2.TopTable[index].tradeIndex || {
            value: null,
            cycleCrc: null
          },
          uvIndex: shopLists.value?.shop2.TopTable[index].uvIndex || {
            value: null,
            cycleCrc: null
          },
        }
      };
      data.push(obj);
    }
  });
  console.log(data);
  dataSource.value = data;
};
const calcColumns = () => {
  columns.value = [
    {
      dataIndex: 'item.title',
      title: '商品名称',
      width: 300,
      dataType: 'product',
      sorter: (a: any, b: any) => a.item.title.localeCompare(b.item.title),
      dataField: {
        item_pic: 'item.pictUrl',
        item_url: 'item.detailUrl',
        item_title: 'item.title',
      }
    },
    {
      dataIndex: 'shop.title',
      title: '店铺名称',
      width: 180,
      dataType: 'shop',
      sorter: (a: any, b: any) => a.shop.title.localeCompare(b.shop.title),
      dataField: {
        shop_title: 'shop.title',
        shop_pic: 'shop.logo',
        shop_id: 'shop.shopId',
      },
    },
    {
      dataIndex: 'type',
      title: '类别',
      width: 80,
      sorter: (a: any, b: any) => a.type.localeCompare(b.type),
      dataType: 'custom',
      slot: 'type',
    },
    {
      dataIndex: 'date',
      title: '日期',
      // width: 100,
      sorter: (a: any, b: any) => a.date.localeCompare(b.date),
    },
    {
      dataIndex: 'tradeIndex.value',
      title: showZs.value ? '交易指数' : '交易金额',
      sorter: (a: any, b: any) => a.tradeIndex.value - b.tradeIndex.value,
      align: 'right',
      dataType: 'customRender',
      render: (text: any, record: any) => {
        if (record.tradeIndex.value === null) {
          return '-';
        }
        if (showZs.value) {
          return record.tradeIndex.value;
        }
        return SycmTableUtils.tranNumber(showZs.value, record.tradeIndex.value, 0, false);
      }
    },
    {
      dataIndex: 'uvIndex.value',
      title: showZs.value ? '流量指数' : '访客数',
      sorter: (a: any, b: any) => a.uvIndex.value - b.uvIndex.value,
      align: 'right',
      dataType: 'customRender',
      render: (text: any, record: any) => {
        if (record.uvIndex.value === null) {
          return '-';
        }
        if (showZs.value) {
          return record.uvIndex.value;
        }
        return SycmTableUtils.tranNumber(showZs.value, record.uvIndex.value, 0, false);
      }
    },
  ];
}
const __option = getCurrentInstance()?.appContext.provides.option;
const handle = async () => {
  if (isLogin({
    emit: () => {
      loginVisible.value = true;
    },
  }, __option)) {
    loading.value = true;
    shopLists.value = await SycmShopAnalysisSale.assignShopListTopTable(await SycmShopAnalysisSale.getShops());
    console.log(shopLists);
    calcColumns();
    calcDataSource();
    loading.value = false;
    visible.value = true;
  }
}
watch(() => showZs.value, () => {
  calcColumns();
  calcDataSource();
}, {deep: true});
</script>

<template>
  <base-app>
    <a-button-group>
      <user style="margin-right: 0;"/>
      <a-button type="primary" size="small" @click="handle" :loading="loading">
        一键转化
      </a-button>
    </a-button-group>
    <user-login-modal v-model:login-visible="loginVisible"/>
    <custom-modal :title="`竞争-竞店分析-销售分析-TOP商品`" width="1200px" style="top: 20px;" v-model:open="visible">
      <template #headerRight>
        <SYCMCustomModalHeaderNotice/>
        <a-checkbox style="margin-left: 10px;" v-model:checked="showZs">显示指数</a-checkbox>
      </template>
      <div style="height: calc(100vh - 150px);overflow-y: auto;">
        <base-table table-name="竞争-竞店分析-销售分析-TOP商品" :columns="columns" :data-source="dataSource"
                    :scroll="{
        // y:750,
      }"
        >
          <template #type="record">
            <a-tag color="green" v-if="record.type==='本店'">
              本店
            </a-tag>
            <a-tag color="purple" v-else-if="record.type==='竞店1'">
              竞店1
            </a-tag>
            <a-tag color="orange" v-else-if="record.type==='竞店2'">
              竞店2
            </a-tag>
          </template>
        </base-table>
      </div>

    </custom-modal>
  </base-app>
</template>

<style scoped>

</style>
